<template>
	<div id="main-sidebar" class="sidebar">
		<el-menu
			:default-active="this.$route.path"
			class="el-menu-vertical-demo"
			:unique-opened="true"
			@select="handleSelect">
			
			<template v-for="item in transmitData.items">
				<el-submenu v-if="item.children" :index="item.index">
					
					<template slot="title" >
						<i :class="item.icon"></i>
						<span style="color: #7e8684;">{{ item.title }}</span>
						<el-badge class="item" :value="transmitData.count" v-if="transmitData.count > 0 && item.title=='系统设置'"></el-badge>
					</template>
					
					<template v-for="sunItem in item.children">
						
						<el-menu-item :index="sunItem.index" :key="sunItem.index">
							<!-- 需要图标的在 item 对象中加上属性 icon -->
							<i :class="sunItem.icon"></i>
							<span slot="title">
								{{ sunItem.title }}
								<el-badge class="item" :value="transmitData.count" v-if="transmitData.count > 0 && sunItem.title=='设备名称点位管理'"></el-badge>
							</span>
						</el-menu-item>
						
					</template>
				</el-submenu>

				<el-menu-item v-else :index="item.index" :key="item.index">
					<!-- 需要图标的在 item 对象中加上属性 icon -->
					<i :class="item.icon"></i>
					<span slot="title">{{ item.title }}</span>
				</el-menu-item>
			</template>
			
		</el-menu>
	</div>
</template>

<script>
export default {
    props: {
		transmitData: {
			type: Object,
			default: null
		}
	},
    data() {
        return {
        }
    },
    methods:{
        // 根据路径绑定到对应的二级菜单，防止页面刷新重新跳回第一个
        toIndex(){
            return this.$route.path.split('/')[2];
        },
		// 切换菜单栏
		handleSelect(index) {
			if (index == '/HY/systemSetting/SBMCDWGL/sbmcdwgl.vue')
			{
				this.$router.push({
					path:'/HY/systemSetting/SBMCDWGL/sbmcdwgl.vue',
					query:{
						'validCount': this.transmitData.count
					}
				})
			}
			else
			{
				this.$router.push(index);
			}
		}
    },
};
</script>

<style scoped>
	.sidebar {
	    display: block;
	    position: absolute;
		width: 220px;
	    left: 0;
	    top: 60px;
	    bottom: 0;
	    overflow-y: scroll;
		background-color: #FFFFFF;
	}
	.sidebar::-webkit-scrollbar {
	    width: 0;
	}
	.el-menu {
		height: 100%;
	}
	.el-menu-item.is-active {
		border-right: 2px solid #55aaff;
	}
</style>